<script setup lang="ts">
import BookTitleSettingComponent from 'src/components/CreateBook/BookTitleSettingComponent.vue'
import BooKDisplayComponent from 'src/components/BooKDisplayComponent.vue'
import BookCanvasComponent from 'src/components/BookCanvasComponent.vue'
import WordSearchSettingComponent from 'src/components/CreateBook/WordSearchSettingComponent.vue'
import GlobalTextComponent from 'src/components/GlobalTextComponent.vue'
import GlobalGridComponent from 'src/components/GlobalGridComponent.vue'
import AppExportComponent from 'src/components/CreateBook/AppExportComponent.vue'
import { useGeneralPuzzleStore } from 'src/stores/CreateBook/general-puzzle-store'
import { string2List } from 'src/utils/LeaferUtil'
import { computed } from 'vue'
import { shuffle_array } from 'src/utils/generate_double_puzzle'
import { WordSearchPuzzleUtil } from 'src/utils/WordSearchPuzzleUtil'
import { useWordSearchIStore } from 'src/stores/wordsearch-store'
import { useCanvasStore } from 'src/stores/canvas-store'
import { useGlobalGridStore } from 'src/stores/global-grid-store'
import { useGlobalTextStore } from 'src/stores/global-text-store'
import { useLearferAppStore } from 'src/stores/leafer-app-store'

const general_puzzle_store = useGeneralPuzzleStore()

const word_list = computed<string>({
  get() {
    return general_puzzle_store.word_list.join('\n')
  },
  set(new_val: string) {
    general_puzzle_store.word_list = string2List(new_val)
  },
})

// 打乱单词
const random_words = (words: string[]) => {
  return shuffle_array(words)
}

// 生成拼图
const leafer_app_store = useLearferAppStore()
const canvas_store = useCanvasStore()
const global_grid_store = useGlobalGridStore()
const global_text_store = useGlobalTextStore()
const word_search_store = useWordSearchIStore()

const generate_wordSearch = async () => {
  global_grid_store.text = global_text_store.$state
  const word_search_reqData = await word_search_store.v1_wordsearch(
    general_puzzle_store.word_list
  )
  const word_search_puzzle = new WordSearchPuzzleUtil(
    canvas_store.canvas,
    general_puzzle_store.title,
    general_puzzle_store.instruction,
    global_grid_store.grid_style,

    word_search_reqData.answers,
    word_search_reqData.puzzle_array,
    word_search_store.solution,
    word_search_store.words_legend
  )
  word_search_puzzle.generate_puzzle()
  const anw_frame = word_search_puzzle.get_answer_frame()
  const topic_frame = word_search_puzzle.get_topic_frame()
  // 将 frame 添加进 列表中
  leafer_app_store.add('topic', topic_frame)
  leafer_app_store.add('ans', anw_frame)

  leafer_app_store.draw()
}
</script>
<template>
  <q-page padding>
    <h4>Word Search 制作工具</h4>
    <h5>
      使用此单词搜索生成器工具创建您自己的单词搜索拼图。使用您自己的单词列表和解决方案创建随机拼图。
    </h5>

    <div class="row">
      <div class="col-3">
        <q-scroll-area style="height: 90vh">
          <div style="padding-right: 5%">
            <!-- 主标题 -->
            <BookTitleSettingComponent />
            <q-separator spaced />
            <BookCanvasComponent />
            <q-separator spaced />
            <!-- 单词列表 -->
            <div class="row">
              <div class="col-8 q-pb-sm q-pr-sm">
                <q-input
                  v-model="word_list"
                  filled
                  type="textarea"
                  label="单词列表"
                />
                <div class="row q-pt-sm q-gutter-sm justify-around">
                  <div class="col-3">
                    <q-btn
                      style="width: 100%"
                      color="primary"
                      label="打乱"
                      @click="random_words(general_puzzle_store.word_list)"
                    />
                  </div>

                  <div class="col-3">
                    <q-btn style="width: 100%" color="primary" label="大写" />
                  </div>
                  <div class="col-3">
                    <q-btn style="width: 100%" color="primary" label="小写" />
                  </div>
                </div>
              </div>

              <div class="col-12">
                <GlobalGridComponent />
              </div>
            </div>
            <q-separator spaced />
            <GlobalTextComponent />

            <q-separator spaced />
            <!-- 单词列表 -->
            <GlobalGridComponent />
            <WordSearchSettingComponent></WordSearchSettingComponent>
          </div>
          <div class="row q-gutter-sm">
            <div class="col-2">
              <q-btn
                style="width: 100%"
                color="primary"
                label="生成"
                @click="generate_wordSearch()"
              />
            </div>

            <div class="col-2">
              <q-btn style="width: 100%" color="primary" label="重置" />
            </div>
            <div class="col-2">
              <AppExportComponent />
            </div>
          </div>
        </q-scroll-area>
      </div>
      <div class="col-9"><BooKDisplayComponent /></div>
    </div>
  </q-page>
</template>
<style lang="sass" scoped></style>
